<!-- 首页课程分类导航部分 -->
<template>
	<view class="category-box">
		<!-- slice(开始下标，结束下标) 返回指定范围的元素，注意：包头不包尾 -->
		<view v-for="(item, index) in categoryList.slice(0, 7)" :key="index"  
		@click="toPageSearch(categoryList[index].Id, categoryList[index].name, index)" >
		<!-- (章ID，章名字，当前下标) --> 
			{{item.name}}
		</view>
		<view @click="toPageSearch(null, '全部分类', -1)" >全部分类</view>
	</view>
</template>

<script>
	
	export default {
		props: {
			categoryList: { // 分类数据
				type: Array
				}
		},
		methods: {
			// 跳转到搜索页（ 一级分类ID，一级分类name，当前下标）
			toPageSearch(id, name, index) {
				const params = {categoryId: id, content: name, activeIndex: index}
				// console.log('index点击一级分类跳转带的参数params', params)
				this.navTo(`/pages/search/search?params=${ JSON.stringify(params) }`)
			},
			
		}
	}
	
</script>

<style lang="scss">
	.category-box {
		display: flex;
		justify-content: space-around;
		// 不行显示不下，自动换行
		flex-wrap: wrap;
		// 上 右 下 左
		padding: 20rpx 30rpx 0 30rpx;
		>view {
			width: 160rpx;
			height: 70rpx;
			background-color: $mxg-color-grey;
			text-align: center;
			line-height: 70rpx;
			font-size: 26rpx;
			border-radius: 20rpx;
			overflow: hidden;
			margin-top: 15rpx;
		}
	}
</style>
}